<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分步表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/css/public.css" media="all">
    <link rel="stylesheet" href="${ctx}/js/lay-module/step-lay/step.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form  class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">借阅ID:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="id" placeholder="请填写借阅ID" class="layui-input" required />

                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">借阅人:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="readerName" placeholder="请填写借阅人" class="layui-input" required />

                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">书名:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="bookName" placeholder="请填写书名" value="" class="layui-input" required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">借阅时间:</label>
                                        <div class="layui-input-block">
                                            <input name="lendDate" type="date" value="" class="layui-input" required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">借阅ID:</label>
                                        <div class="layui-input-block">
                                            <div id="id"  class="layui-form-mid layui-word-aux"></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">借阅人:</label>
                                        <div class="layui-input-block">
                                            <div id="readerName" class="layui-form-mid layui-word-aux"></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">书名:</label>
                                        <div class="layui-input-block">
                                            <div id="bookName" class="layui-form-mid layui-word-aux"></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">借阅时间:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">
                                                <span id="lendDate" style="font-size: 18px;color: #333;"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">到期时间:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">
                                                <span id="dueDate" style="font-size: 18px;color: #333;"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认续借&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        续借成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">请查看借阅表确认</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">再次续借</button>
                                    <button id="lendInfo" class="layui-btn layui-btn-primary">查看借阅情况</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<script src="${ctx}/lib/layui/layui.js" charset="utf-8"></script>
<script src="${ctx}/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    const ctx = "${ctx}";
    layui.use([ 'form', 'step','laydate','util'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step,
            util = layui.util,
            laydate = layui.laydate;

        // laydate.render({
        //     elem: '#renewtime',
        //     type: 'datetime',
        //     fullPanel: true // 2.8+
        // });

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '填写续借信息'
            }, {
                title: '确认续借信息'
            }, {
                title: '续借完成'
            }]
        });


        form.on('submit(formStep)', function (data) {
            console.log(data);
            $.ajax({
                type:"post",
                url: ctx + "/book/checkRenew",
                data:{
                    id: data.field.id,
                    bookName: data.field.bookName,
                    readerName: data.field.readerName,
                    lendDate: data.field.lendDate
                },
                success:function (result) {
                    console.log(result);
                    // 判断删除结果
                    if (result.code === 200) {
                        // 提示成功
                        $("#id").text(result.result.id);
                        $("#bookName").text(result.result.bookName);
                        $("#readerName").text(result.result.readerName);
                        $("#lendDate").text(result.result.lendDate);
                        $("#dueDate").text(result.result.dueDate);
                        step.next('#stepForm');
                    } else {
                        // 提示失败
                        layer.msg(result.msg, {icon:5});
                    }
                }
            });

            return false;
        });

        form.on('submit(formStep2)', function (data) {
            console.log(data);
            $.ajax({
                type:"post",
                url: ctx + "/book/renewBook",
                data:{
                    id: $("#id").text(),
                    bookName: $("#bookName").text(),
                    readerName: $("#readerName").text(),
                    lendDate: $("#lendDate").text()
                },
                success:function (result) {
                    // 判断删除结果
                    if (result.code === 200) {
                        // 提示成功
                        // layer.msg("删除成功！",{icon:6});
                        step.next('#stepForm');
                    } else {
                        // 提示失败
                        layer.msg(result.msg, {icon:5});
                    }
                }
            });
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {

            step.next('#stepForm');

        });

        $('#lendInfo').click(function () {

            var index = layui.layer.open({
                title: "借阅情况",
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: ctx + '/lend/lendPage',
            });
        })
    })
</script>
</body>
</html>